import React, { useEffect } from 'react';
import { connect, formatMessage } from 'umi';
import { Card } from 'antd';
import { AuditOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, SearchForm, ModalForm, Table, Radio, Input } from '@/zero';

const namespace = 'task-list';

const mapStateToProps = ({ [namespace]: model }) => ({
  dataSource: model.dataSource,
  total: model.total,
  pagination: model.pagination,
  searcher: model.searcher,
});

const mapDispatchToProps = (dispatch) => ({
  fnList: (payload) => dispatch({ type: `${namespace}/fnList`, payload }),
  fnCreate: (payload) => dispatch({ type: `${namespace}/fnCreate`, payload }),
  fnUpdate: (payload) => dispatch({ type: `${namespace}/fnUpdate`, payload }),
  fnDelete: (payload) => dispatch({ type: `${namespace}/fnDelete`, payload }),
});

const funcItems = ({ disabled }) => [
  {
    child: (
      <>
        <Form.Item shouldUpdate noStyle>
          {(form) => (
            <>
              {formatMessage({
                id: `是否同意将版本“${form.getFieldValue('newVersion')}”设置为“${form.getFieldValue(
                  'name',
                )}”的有效版本?`,
              })}
              <Form.Item
                name="result"
                rules={[
                  {
                    required: true,
                    message: formatMessage({ id: '请选择审批结果' }),
                  },
                ]}
              >
                <Radio
                  options={[
                    { label: '同意', value: '同意' },
                    { label: '拒绝', value: '拒绝' },
                  ]}
                  disabled={disabled}
                />
              </Form.Item>
            </>
          )}
        </Form.Item>
      </>
    ),
  },
];

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)((props) => {
  const {
    dataSource,
    total,
    pagination,
    searcher,

    fnList,
    fnUpdate,
  } = props;

  useEffect(() => {
    fnList();
  }, []);

  const columns = [
    {
      title: formatMessage({ id: '模板名称' }),
      dataIndex: 'name',
    },
    {
      title: formatMessage({ id: '原生效版本号' }),
      dataIndex: 'rawVersion',
    },
    {
      title: formatMessage({ id: '申请生效版本号' }),
      dataIndex: 'newVersion',
    },
    {
      title: formatMessage({ id: '申请人' }),
      dataIndex: 'username',
    },
    {
      title: formatMessage({ id: '申请日期' }),
      dataIndex: 'dateCreated',
    },
    {
      title: formatMessage({ id: '审批结果' }),
      dataIndex: 'result',
    },
    {
      title: formatMessage({ id: '操作' }),
      dataIndex: 'xAction',
      render: (text, record) => (
        <>
          <ModalForm
            width={500}
            title={formatMessage({ id: '审批' })}
            items={funcItems}
            initialValue={record}
            onOk={(newRecord, success) => {
              fnUpdate({
                ...record,
                ...newRecord,
              }).then(() => {
                success();
              });
            }}
          >
            <a title={formatMessage({ id: '审批' })}>
              <AuditOutlined />
            </a>
          </ModalForm>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <Card>
        <SearchForm
          items={[
            {
              child: (
                <Form.Item label={formatMessage({ id: '模板名称' })} name="name">
                  <Input />
                </Form.Item>
              ),
            },
            {
              child: (
                <Form.Item label={formatMessage({ id: '申请人' })} name="username">
                  <Input />
                </Form.Item>
              ),
            },
          ]}
          initialValue={{
            name: searcher.name,
            username: searcher.username,
          }}
          onSubmit={(newSearcher) => {
            fnList({ pagination: { ...pagination, current: 1 }, searcher: newSearcher });
          }}
          onReset={() => {
            fnList({ pagination: { ...pagination, current: 1 }, searcher: {} });
          }}
        />

        <Table
          downloadExcel
          columnFilter
          rowKey="id"
          columns={columns}
          dataSource={dataSource}
          pagination={{
            ...pagination,
            total,
          }}
          onChange={(newPagination, newFilters, newSorter) => {
            fnList({ pagination: newPagination, filters: newFilters, sorter: newSorter });
          }}
        />
      </Card>
    </PageContainer>
  );
});
